<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单的隐藏与显示</title>
    // function fn(id){
    //     if(id === 'u1'){
    //         document.getElementById('u1').style.display='block';
    //         document.getElementById('u2').style.display='none';
    //         document.getElementById('u3').style.display='none';
    //     } else if(id === 'u2'){
    //         document.getElementById('u2').style.display='block';
    //         document.getElementById('u1').style.display='none';
    //         document.getElementById('u3').style.display='none';
    //     }else if(id === 'u3'){
    //         document.getElementById('u3').style.display='block';
    //         document.getElementById('u2').style.display='none';
    //         document.getElementById('u1').style.display='none';
    //     }
    // }
    <script>
        function fn(a,b,c){
            let aChild=document.getElementById(a);
            let bChild=document.getElementById(b)
            let cChild=document.getElementById(c)
            //当事件触发式存在两种场景
            //当前处于隐藏状态
            if(aChild.style.display=="none"){
            //     显示当前
                aChild.style.display="block";
                bChild.style.display="none";
                cChild.style.display="none";
            }else{
                aChild.style.display="none"
            }
        }
    </script>
</head>
<body>
<h2 onclick="fn('u1','u2','u3')">电子产品</h2>
<ul style="display: block;" id="u1">
    <li>手机</li>
    <li>平板</li>
    <li>电脑</li>
</ul>
<h2 onclick="fn('u2','u1','u3')">家用电器</h2>
<ul style="display: none;" id="u2">
    <li>电视机</li>
    <li>冰箱</li>
    <li>空调</li>
    <li>洗衣机</li>
</ul>
<h3 onclick="fn('u3','u1','u2')">水果</h3>
<ul style="display: none;" id="u3">
    <li>苹果</li>
    <li>西瓜</li>
    <li>香蕉</li>
</ul>
</body>
</html>